import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
// 引入基础样式
import "@/assets/css/base.css";
import "@/assets/css/el-rest.css";
//引入侧边栏菜单插件
import subMenu from "qf-sub-menu";
//引入进度条
import nprogress from "nprogress";
//引入进度条css文件
import "nprogress/nprogress.css";

Vue.use(ElementUI);

Vue.use(subMenu);

Vue.config.productionTip = false;
//全局前置钩子（路由守卫）
router.beforeEach((to, from, next) => {
    nprogress.start()
    //to即将进入的路由
    //from即将离开的路由
    //next放行
    //判断本地是否有token
    //除了登录页以外，其他所有的页面在没有登录的情况下都不给用户访问
    //如果有就放行，如果没有就不通过，重新跳转到登录页
    let token = localStorage.getItem('qf-token') || "";
    if (token) { //已经登录
        //获取用户菜单
        //store中sideMenu是否为空数组，如果是空数组，就要获取用户菜单
        if (store.state.sideMenu.length === 0) {
            // console.log(store.dispatch("GET_MENULIST"));
            store.dispatch("GET_MENULIST")//因为action函数加了async 所以它是个promise<pedding>
                .then(() => {
                    next({ path: to.path })//放行
                    //next里面传参即要进入的页面的路由信息，因为next传参之后，当前要进入的路由会被废止，转而进入参数对应的路由，虽然是同一个路由，这么做主要是为了确保addRoutes生效
                })
        } else {
            next()
        }

    } else { //没有登录
        //判断是不是访问登录页
        if (to.path !== "/login") {
            //跳转到登录页
            next({ path: "/login" })
        } else {
            next()
        }
    }
})

//自定义鉴权指令

Vue.directive("has", {
    inserted(el, binding) {
        // console.log(el)
        // console.log(binding)
        //从本地取出用户的按钮权限
        let permission = localStorage.getItem('permissionButtons') || '[]'

        permission = JSON.parse(permission);
        // console.log(permission)

        //看permission中是否包含传入的value对应字段
        //如果包含说明具备该按钮权限
        //不包含则要禁用按钮
        if (!permission.includes(binding.value)) {
            //先保存按钮原来的类名
            let ElclassName = el.className;
            //用原来的类名加上is-disabled触发禁用样式
            el.className = ElclassName + " " + "is-disabled"
            //真正禁用按钮
            el.disabled = true;
        }
    }
})

router.afterEach((to, from) => {//全局后置钩子
    nprogress.done()
    // console.log(to);
    // console.log(from);
    let matched = [...to.matched]//浅拷贝到一个新的数组
    matched.splice(0, 1),
        // console.log(matched);
        store.commit("SET_BREADCRUMB", matched)
})

new Vue({
    router,
    store,
    render: (h) => h(App),
}).$mount("#app");